<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>WelCome to HuNan University JudgeOnline</title>
    <link rel="stylesheet" href="./plugs/layui/css/layui.css" />
    <link rel="stylesheet" href="./style/exstyle.css" />
    <script src="./plugs/layui/layui.js"></script>
    <script src="./js/jquery-3.3.1.min.js"></script>
</head>
<body>
    <div class="layui-container">
        <!-- page head -->
        <div class="head-logo layui-row">
            <div class="layui-col-md3">
                <img class="logo" alt="logo" src="img/hnulogo.gif" />
            </div>
            <div class="layui-col-md8">
                <h2 class="title">Welcome To Hunan University Judge Online</h2>
            </div>
            <div class="layui-col-md1">
                <img class="logo" alt="acmlogo" src="img/acm.png" />
            </div>
        </div>
        <div class="layui-row layui-bg-green">
            <div class="layui-col-md10">
                <ul class="layui-nav layui-bg-green">
                    <li id="home" class="layui-nav-item"><a href="index">Home</a></li>
                    <li id="problem" class="layui-nav-item"><a href="problemset">Problem</a></li>
                    <li id="contest" class="layui-nav-item"><a href="contest">Contest</a></li>
                    <li id="status" class="layui-nav-item"><a href="status">Status</a></li>
                    <li id="rank" class="layui-nav-item"><a href="rank">Rank</a></li>
                    <li id="user" class="layui-nav-item"><a href="discuss">Discuss</a></li>
                    <li id="about" class="layui-nav-item"><a href="faq">FAQ</a></li>
                </ul>
            </div>
            <div class="layui-col-md2">
                <ul class="layui-nav layui-bg-green">
                    <li id="info" class="layui-nav-item">
                        <a href="">User</a>
                        <dl class="layui-nav-child">
                            <dd><a href="javascript:;">Login</a></dd>
                            <dd><a href="javascript:;">Register</a></dd>
                        </dl>
                    </li>
                </ul>
            </div>
        </div>

        <!-- Site content-->
        <div class="main-body">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md4">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            <h2>最近通知</h2>
                        </div>
                        <div class="layui-card-body main-card-body">
                            <h4 class="text-danger">acm新生赛将于近期展开</h4>
                            <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
                            <p><a class="btn btn-primary" href="#" role="button">更多 &raquo;</a></p>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md4">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            <h2>风采展示</h2>
                        </div>
                        <div class="layui-card-body main-card-body">
                            <div class="layui-carousel" id="test1">
                                <div carousel-item>
                                    <div>
                                        <div style="background-image: url('img/pic1.jpg'); height: 21em">
                                            <div style="text-align: center; padding-top: 2em">
                                                <h3 style="color: white">
                                                    2005年.起点
                                                </h3>
                                                <p style="color: white">
                                                    湖南省首届程序设计竞赛团体冠军
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                    <div>
                                        <div style="background-image: url('img/pic2.jpg'); height: 21em">
                                            <div style="text-align: center; padding-top: 2em">
                                                <h3 style="color: white">
                                                    2008年杭州
                                                </h3>
                                                <p style="color: white">
                                                    参与icpc
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                    <div>
                                        <div style="background-image: url('img/pic3.jpg'); height: 21em">
                                            <div style="text-align: center; padding-top: 2em">
                                                <h3 style="color: white">
                                                    2010年哈尔滨
                                                </h3>
                                                <p style="color: white">
                                                    区域赛上首夺金队员合影
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                    <div>
                                        <div style="background-image: url('img/pic4.jpg'); height: 21em">
                                            <div style="text-align: center; padding-top: 2em">
                                                <h3 style="color: white">
                                                    2014年莫斯科
                                                </h3>
                                                <p style="color: white">
                                                    首次参加全球总决赛
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- <div class="carousel slide roll" id="carousel-84594">
                        <ol class="carousel-indicators">
                            <li data-slide-to="0" data-target="#carousel-84594" class="active">
                            </li>
                            <li data-slide-to="1" data-target="#carousel-84594">
                            </li>
                            <li data-slide-to="2" data-target="#carousel-84594">
                            </li>
                            <li data-slide-to="2" data-target="#carousel-84594">
                            </li>
                        </ol>
                        <div class="carousel-inner">
                            <div class="item active">
                                <img alt="" src="img/pic1.jpg" />
                                <div class="carousel-caption">
                                    <h4>
                                        2005年.起点
                                    </h4>
                                    <p>
                                        湖南省首届程序设计竞赛团体冠军
                                    </p>
                                </div>
                            </div>
                            <div class="item">
                                <img alt="" src="img/pic2.jpg" />
                                <div class="carousel-caption">
                                    <h4>
                                        2008年杭州
                                    </h4>
                                    <p>
                                        参与icpc
                                    </p>
                                </div>
                            </div>
                            <div class="item">
                                <img alt="" src="img/pic3.JPG" />
                                <div class="carousel-caption">
                                    <h4>
                                        2010年哈尔滨
                                    </h4>
                                    <p>
                                        区域赛上首夺金队员合影
                                    </p>
                                </div>
                            </div>
                            <div class="item">
                                <img alt="" src="img/pic4.JPG" />
                                <div class="carousel-caption">
                                    <h4>
                                        2014年莫斯科
                                    </h4>
                                    <p>
                                        首次参加全球总决赛
                                    </p>
                                </div>
                            </div>
                        </div> <a class="left carousel-control" href="#carousel-84594" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control" href="#carousel-84594" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
                    </div>
                    <p><a class="btn btn-primary margin-top-2" href="#" role="button">更多 &raquo;</a></p> -->
                </div>
                <div class="layui-col-md4">
                    <img alt="acm-photo" src="img/acm2.jpg" class="img-rounded" style="width: 100%" />
                </div>
            </div>
        </div>
  
        <!-- Site footer -->
        <footer class="footer">
            <p>&copy; HNU ACM Team | <a href="#">Contact Us</a> | Version 2018</p>
            <p>Developer：balabala</p>
        </footer>
  
    </div>
</body>
<script>
    $("#home").addClass("layui-this");
    layui.use('element', function() {
        var element = layui.element;
    })
    layui.use('carousel', function() {
        var carousel = layui.carousel;
        carousel.render({
            elem: '#test1',
            width: '100%', //设置容器宽度
            arrow: 'always' //始终显示箭头
        });
    })
</script>
</html>